import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import AppBar from 'material-ui/AppBar';
import Toolbar from 'material-ui/Toolbar';
import Typography from 'material-ui/Typography';
import Button from 'material-ui/Button';
import IconButton from 'material-ui/IconButton';
import MenuIcon from 'material-ui-icons/Menu';
import AccountCircle from 'material-ui-icons/AccountCircle';
import SvgIcon from 'material-ui/SvgIcon';
import AccountBox from 'material-ui-icons/AccountBox';
import Autorenew from 'material-ui-icons/Autorenew';
import Grade from 'material-ui-icons/Grade';
import Home from 'material-ui-icons/Home';
import Help from 'material-ui-icons/Help';
import Forward from 'material-ui-icons/Forward';
import ArrowBack from 'material-ui-icons/ArrowBack';
import ArrowForward from 'material-ui-icons/ArrowForward';
import Refresh from 'material-ui-icons/Refresh';
import StarBorder from 'material-ui-icons/StarBorder';
import purple from 'material-ui/colors/purple';
import red from 'material-ui/colors/red';
import Close from 'material-ui-icons/Close';
import Remove from 'material-ui-icons/Remove';
import AllOut from 'material-ui-icons/AllOut';
import grey from 'material-ui/colors/grey';
//import Favourites from '../Favourites/Favourites';

const styles = {
    root: {
        flexGrow: 1,
      },
      flex: {
        flex: 1,
      },
  menuButton: {
    marginLeft: 0,
    marginRight: 0,
  },
  inputStyle:{
    color:grey[900]
  }
};

class AppHead extends Component {
    constructor(props){
        super(props);
        //
    }
    onClickMenuIcon(){
        console.log('MenuIcon on click');
        this.props.onShowDrawerClick();
    }
    closeApp(){
        //ipcRenderer.send('close-main-window');
        console.log('close the App.');
    }
    handleInputChange(event){
        this.props.webaddressInput(event);
    }
    render(){
        const { classes } = this.props;
        return (
            <div>
        <AppBar position="static">
            <Toolbar>
            <IconButton className={classes.menuButton} color="inherit" aria-label="Menu"
             onClick={this.onClickMenuIcon.bind(this)}>
                <MenuIcon />
            </IconButton>
            <IconButton className={classes.menuButton} color="inherit" aria-label="Menu"
                onClick={this.props.goBack} >
                <ArrowBack />
            </IconButton>
            <IconButton className={classes.menuButton} color="inherit" aria-label="Menu"
                onClick={this.props.goForward} >
                <ArrowForward />
            </IconButton>
            <IconButton className={classes.menuButton} color="inherit" aria-label="Menu"
                onClick={this.props.goReload} >
                <Refresh />
            </IconButton>
            <IconButton className={classes.menuButton} color="inherit" aria-label="Menu"
                onClick={this.props.goHome} >
                <Home />
            </IconButton>

             <input id='webaddressInputBar' type="text" size="85"
               className={classes.inputStyle} />

            <IconButton className={classes.menuButton} color="inherit" aria-label="Menu"
                    onClick={this.props.markFavorite} >
                    <StarBorder />
            </IconButton>
            <div id="favouritesApps"></div>

            <IconButton className={classes.menuButton} color="inherit" aria-label="Menu"
                onClick={this.props.goTo} >
                <Forward />
            </IconButton>
            <IconButton  className={classes.menuButton} color="inherit" aria-label="Menu"
                    onClick={this.props.showAccount}  >
                <AccountCircle />
            </IconButton>
            <IconButton className={classes.menuButton} aria-label="Menu"
                    onClick={this.props.showHelp} >
                <Help />
            </IconButton>
            <IconButton className={classes.menuButton} color="inherit" aria-label="Menu">
                <Remove id="minizeApp" />
            </IconButton>
            <IconButton className="closeApp"  color="inherit" aria-label="Menu">
                <Close id="closeApp" />
            </IconButton>
            </Toolbar>

        </AppBar>
        </div>
        );
    }
}

AppHead.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(AppHead);